<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>微信支付</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/api.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/layer/layer.js"></script>

		<style type="text/css">
			*{
				margin: 0rem;
				padding: 0rem;
				text-decoration: none;
				list-style: none;

			}
			html,body{
				background-color: #fff;
				width: 100%;
				height: 100%;
				 /*font-size:  100rem;*/
				 font-size: calc(100vw / 7.5);
				 font-family: "microsoft yahei";
			}

			/*内容*/
			.content{
				box-sizing: border-box;
				padding: 0.32rem;
				width: 100%;
			}
			.content{
				width: 100%;
			}
			.content form {
				width: 100%;
			}
			.content form .info{
				box-sizing: border-box;
				height: 1rem;
				line-height: 1rem;
				width: 100%;
				color: #9db2c3;
				border-color: #fff;
				padding: 0rem;
				border-bottom: 1px solid #e9f0f0;
			}

			.content form .sub{
				position: absolute;
				bottom: 0.8rem;
				left: 0.64rem;
				width: 6.25rem;
				height: 0.9rem;
				background: #7f9eba;
				color: #fff;
			}
			.content form .box{
				width: 100%;
				height: 7.68rem;
				background: #43475b;
				/*border-radius: 0.21rem;*/
			}
			.content form .box .top{
				width: 100%;
				height: 0.91rem;
				background: #393d4c;
				font-size: 0.28rem;
				line-height: 0.91rem;
				color: #fff;
				padding-left: 0.38rem;
				/*-moz-border-radius-topleft:0.21rem;
				-moz-border-radius-topright: 0.21rem;*/
			}
			.content form .box .code{
				width: 100%;
				height: 4.88rem;
				position: relative;
			}
			.content form .box .code img{
				position: absolute;
				top: 0.94rem;
				left: 1.81rem;
				width:3.24rem;
				height:3.24rem;

			}
			.content form .box .info-box{
				position: relative;
				width: 100%;
				height: 0.72rem;
				font-size: 0.28rem;
				line-height: 0.72rem;
				color:#fff;
				text-align: center;
			}
			.content form .box .info-box .info{
				color:#fff;
				text-decoration: none;
				border-bottom: 0px;
			}
			.content form .box .foot{
				width: 100%;
				text-align: center;
				font-size: 0.5rem;
				color: yellow;
				margin-top:0.25rem;
			}
			#copyTarget{
				display: inline-block;
				border: 0px;
				position: absolute;
				top: 0.1rem;
				left:1.28rem;
			}
			#copyTarget,#hiddenText{
				opacity: 0;
				/* font-size: 0.26rem; */
				height: 1.1rem;
				width: 4.3rem;
				/* width: 4rem; */
				z-index: 1;
				line-height: 1.1rem;
				font-size: 0.26rem;
				padding: 0rem;


			}
			#hiddenText{
				opacity: 0;
				position: absolute;
				/* top: 1.1rem; */
				left: 1.26rem;
				padding: 0rem;

			}
			.info-box button{
				z-index: 10;
				text-align: left;
				margin-top: 0.15rem;
				font-size: 0.33rem;
				color: #9a9a9a;
				background: #43475b;
				border-radius: 12%;
				border:0px;
				color: yellow;
			}
			canvas{
				opacity: 0;
			}
		</style>
	</head>

	<body>
		<script>
			var type;
			$(function(){
				$("#wrapper").load("../header.html");

				if(localStorage.pay_type ==1){
					type ="微信支付"
				}else if(localStorage.pay_type ==2){
					type="支付宝支付"
				}else{
					type = "银行卡支付"
				}

			})
			setTimeout(function(){
				$("#wrapper").find(".con").html(`${type}`).end().find(".dot img").css("display","none");
				$(".arrow").on("tap",function(){
				window.location.href = "zhanghuchongzhi.html";
			})
			},200)

		</script>

		<div class="wrapper" id="wrapper"></div>


		<div class="content">
			<form action="#" method="post">
				<div class="box">
					<div class="top">向客户收款</div>
					<div class="code">

							<img src="" alt="" id="downcode">

					</div>
					<div class="info-box">
						<span>订单号：</span>
						<input id="copyTarget" value="" readonly class="info">
						<textarea id="hiddenText" class="hidden info" readonly></textarea>
						<span class="info" id="insetinfo">56565454546</span>
						<button type="button" id="copyButton">复制</button>
					</div>
					<div class="foot">转账时请备注订单号</div>
				</div>
				<!-- <a href="" download="code.png" id="downloadImg"></a> -->
					<input type="button" class="sub" value = "保存二维码扫描支付" id="downloadCode">

			</form>
		</div>

		<script>
			 $("#downloadImg").attr("href",`${localStorage.chongzhiurl}`)

			$(".code img").attr("src",`${localStorage.chongzhiurl}`);
			$("#insetinfo").html(localStorage.order_id);
			console.log(localStorage.order_id)
			$("#copyTarget").val(localStorage.order_id)
			$(".foot").html(localStorage.tip)

		//点击保存图片
		$("#downloadCode").on("click",function(){
			console.log(325)
			layer.msg("正在保存图片到相册")
					 plus.gallery.save(`${localStorage.chongzhiurl}`, function(){
						layer.msg("已保存到相册")
					} );
			})




			//复制文字
			$("#copyTarget").val(localStorage.order_id)

		document.getElementById("copyButton").addEventListener("click", function () {
			copyToClipboard(document.getElementById("copyTarget"));
			console.log(123)
			layer.msg("复制成功")
		});

		function copyToClipboard(elem) {
			var target = document.getElementById("hiddenText");
			target.textContent = elem.value;
			console.log(target.textContent);
			select(target);
			document.execCommand("copy");
		}

		function select(element) {
			var selectedText;

			if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
				element.focus();
				element.setSelectionRange(0, element.value.length);

				selectedText = element.value;
			} else {
				if (element.hasAttribute('contenteditable')) {
					element.focus();
				}

				var selection = window.getSelection();
				var range = document.createRange();

				range.selectNodeContents(element);
				selection.removeAllRanges();
				selection.addRange(range);

				selectedText = selection.toString();
			}

			return selectedText;
		}

		// plus保存图片
		$(".sub").on("click",function(){
			console.log(325)
			layer.msg("正在保存图片到相册")
					 plus.gallery.save( `${localStorage.chongzhiurl}`, function(){
						layer.msg("已保存到相册")
					} );

					})

		function plusReady(){
				$(".sub").on("click",function(){
					layer.msg("正在保存到相册")
					plus.gallery.save(`${localStorage.chongzhiurl}`, function(){
					layer.msg("保存到相册");


				} );
				})
			}

	//api截图
	apiready = function () {

			funIniGroup();
	}
	function funIniGroup(){

	}

$("#downcode").on("click",function(){
	layer.msg("正在保存到相册")
	var screenClip = api.require('screenClip');
	screenClip.open({
		album:true,
		imgName:"二维码"
	},function(ret, err) {
			if (ret.status) {
					layer.msg(JSON.stringify(ret));
			} else {
					layer.msg(JSON.stringify(err));
			}
	});
})


		</script>
	</body>

</html>
